Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TransferList.Toolbar implements toolbar pattern #2274

Merged
merged 12 commits into from
Oct 4, 2024

Conversation

r100-stack
Copy link
Member

Changes

After #2263, tooltips now have a default delay. This, in addition to the vertical placement of the tooltips in TransferList.Toolbar make it difficult to go from one button to another.

This PR fixes this by using a <ButtonGroup orientation="vertical" /> for TransferList.Toolbar under the hood. The tooltips now show to the right (#1709) and with no delay when going from one button to the adjacent one (#1524).

Additionally, this also improves accessibility since <ButtonGroup role="toolbar"> implements the toolbar pattern with arrow-key navigation functionality.

Testing

Before After
Tooltips
Enregistrement.de.l.ecran.2024-09-27.a.10.33.12.mov
Enregistrement.de.l.ecran.2024-09-27.a.10.32.07.mov
arrow-key functionality
Enregistrement.de.l.ecran.2024-10-01.a.17.50.56.mov
Enregistrement.de.l.ecran.2024-10-01.a.17.48.45.mov

Docs

Added minor changesets.

@r100-stack r100-stack self-assigned this Oct 1, 2024
@r100-stack r100-stack marked this pull request as ready for review October 1, 2024 22:18
@r100-stack r100-stack requested a review from a team as a code owner October 1, 2024 22:18
@r100-stack r100-stack requested review from mayank99 and smmr-dn and removed request for a team October 1, 2024 22:18
.changeset/orange-cats-mix.md Outdated Show resolved Hide resolved
testing/e2e/app/routes/TransferList/spec.ts Outdated Show resolved Hide resolved
testing/e2e/app/routes/TransferList/route.tsx Outdated Show resolved Hide resolved
@mayank99 mayank99 mentioned this pull request Oct 4, 2024
@r100-stack r100-stack enabled auto-merge (squash) October 4, 2024 17:02
@r100-stack r100-stack merged commit 7f1bb28 into main Oct 4, 2024
18 checks passed
@r100-stack r100-stack deleted the r/transfer-list-toolbar-tooltip branch October 4, 2024 17:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants